import React, {useEffect, useState} from 'react';
import {Area, AreaChart, CartesianGrid, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend} from "recharts";

import {requestGet} from "util/request";
import LogFactory from "log/LogFactory";
import {Card} from "antd";

const log = LogFactory.getLog("AdminDashboardComponent");

const AdminDashboardComponent = () => {
        const [data,setData] = useState<any[]>([ ]);

    useEffect(() => {
        requestGet<{}[]>("/manager/stats/all-count")
            .then(res => {
                log.debug("res", res) ;
                if (res.success){
                    setData(res.data);
                }
            }) ;
    },[]);
    return (
        <div>
            <Card
                title={"后台看板"}
            >
                <ResponsiveContainer width={700} height={260}>
                    <AreaChart data={data}
                               margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                        <defs>
                            <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
                                <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
                            </linearGradient>
                            <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
                                <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
                            </linearGradient>
                        </defs>
                        <XAxis dataKey="name" />
                        <YAxis />
                        <CartesianGrid strokeDasharray="3 3" />
                        <Tooltip />
                        <Legend verticalAlign="top" height={36}/>
                        <Area name={"可用数量"} type="monotone"
                              label={{ fill: '#198146', fontSize: 20,fontWeight: 'bold'}}
                              dataKey="num" stroke="#8884d8" fillOpacity={1} fill="url(#colorUv)" />
                        <Area name={"总数"} type="monotone"
                            // label={{ fill: '#196e81', fontSize: 20,fontWeight: 'bold'}}
                              dataKey="size" stroke={"#ae37b2"} fillOpacity={1} fill="url(#colorPv)" />
                    </AreaChart>
                </ResponsiveContainer>
            </Card>
        </div>
    );
};

export default AdminDashboardComponent;
